<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

    <input id="upUpdatePicture_cyt" hidden th:value="${productId.productId}">

    <br><br>

    <font size="5px" style="margin-left: 50%"><b>填写定制产品信息</b></font>
    <form class="form-inline" id="myform" role="form">
        <table class="table">
            <thead>
                <tr>
                    <td style="background-color: #afd9ee" >
                        <font size="3">基本信息</font>
                        <input hidden name="productId">
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="form-group">
                            <label>产品名称：</label>
                            <input type="text" name="productName" id="productName" onkeyup="yz_productName()" autocomplete="off" style="width: 350px" class="form-control" placeholder="项目名称支持中英文数字，长度限制3-40个字符">
                            <div hidden id="div_inletPressureMin" class="alert alert-danger">填写不正确</div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td >
                        <div class="form-group">
                            <label>采购数量：</label>
                            <input type="text" name="productCount" onkeyup="yz_productCount()" id="productCount" autocomplete="off" class="form-control" placeholder="请输入">&nbsp;&nbsp;个
                            <span id="span_productCount" style="color: red"></span>
                        </div>
                    </td>
                </tr>
            </thead>
        </table>
        <table class="table table-bordered">
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">关键参数</font>
                </td>
            </tr>
            <tr>
                <td width="8%" colspan="2" style="text-align: center;vertical-align: middle">
                    <b>产品类别：</b>
                </td>
                <td>
                    <div>
                        <label class="radio-inline">
                            <input type="radio" name="productCategory" value="调压箱">调压箱
                        </label>
                        <label class="radio-inline" style="margin-left: 100px">
                            <input type="radio" name="productCategory" value="调压柜">调压柜
                        </label>
                        <label class="radio-inline" style="margin-left: 100px">
                            <input type="radio" name="productCategory" value="调压撬">调压撬
                        </label>
                        <label class="radio-inline" style="margin-left: 100px">
                            <input type="radio" name="productCategory" value="调压计量柜">调压计量柜
                        </label>
                        <label class="radio-inline" style="margin-left: 100px">
                            <input type="radio" name="productCategory" value="调压计量撬">调压计量撬
                        </label>
                        <br>
                        <br>
                        <label class="radio-inline">
                            <input type="radio" name="productCategory" value="其他">其他
                        </label>
                        <input type="text" name="otherType" class="form-control" autocomplete="off" placeholder="请输入">
                    </div>
                </td>
            </tr>
            <tr>
                <td width="8%" rowspan="2" style="text-align: center;vertical-align: middle">
                    <b>设计压力：</b>
                </td>
                <td style="text-align: center;vertical-align: middle">进口压力</td>
                <td>
                    最小值：<input name="inletPressureMin" onkeyup="yz_inletPressureMin()" id="inletPressureMin" autocomplete="off" placeholder="请输入" class="form-control">
                    <span id="span_inletPressureMin" style="color: red"></span>
                    <input type="radio" name="inletPressureMinKpaMpa" value="1" style="margin-left: 50px">Kpa
                    <input type="radio" name="inletPressureMinKpaMpa" value="2" style="margin-left: 50px">Mpa
                        <br>
                        <br>
                    最大值：<input name="inletPressureMax" onkeyup="yz_inletPressureMax()" id="inletPressureMax" autocomplete="off" placeholder="请输入" class="form-control">
                    <span id="span_inletPressureMax" style="color: red"></span>
                    <input type="radio" name="inletPressureMaxKpaMpa" value="1" style="margin-left: 50px">Kpa
                    <input type="radio" name="inletPressureMaxKpaMpa" value="2" style="margin-left: 50px">Mpa
                </td>
            </tr>
            <tr>
                <td style="text-align: center;vertical-align: middle">出口压力</td>
                <td>
                    最小值：<input name="outletPressureMin" onkeyup="yz_outletPressureMin()" id="outletPressureMin" autocomplete="off" class="form-control" placeholder="请输入">
                    <span style="color: red" id="span_outletPressureMin"></span>
                    <input type="radio" name="outletPressureMinKpaMpa" value="1" style="margin-left: 50px">Kpa
                    <input type="radio" name="outletPressureMinKpaMpa" value="2" style="margin-left: 50px">Mpa
                    <br>
                    <br>
                    最大值：<input name="outletPressureMax" onkeyup="yz_outletPressureMax()" id="outletPressureMax" placeholder="请输入" autocomplete="off" class="form-control">
                    <span id="span_outletPressureMax" style="color: red"></span>
                    <input type="radio" name="outletPressureMaxKpaMpa" value="1" style="margin-left: 50px">Kpa
                    <input type="radio" name="outletPressureMaxKpaMpa" value="2" style="margin-left: 50px">Mpa
                </td>
            </tr>
            <tr>
                <td>
                    <b>*流量计长度：</b>
                </td>
                <td colspan="2">
                    <input name="flowmeterLength" onkeyup="yz_flowmeterLength()" id="flowmeterLength" placeholder="请输入流量计长度" autocomplete="off" class="form-control">&nbsp;&nbsp;&nbsp;<b>Nm3/h</b>
                    <span style="color: red" id="span_flowmeterLength"></span>
                </td>
            </tr>
<!--            <tr>-->
<!--                <td>-->
<!--                    <b>*调压器：</b>-->
<!--                </td>-->
<!--                <td colspan="2">-->
<!--                    <input class="form-control" name="pressureRegulatorType" style="margin-left: 25px">-->
<!--                </td>-->
<!--            </tr>-->
            <tr>
                <td>
                    <b>外箱：</b>
                </td>
                <td colspan="2">
                    <label class="radio-inline">
                        <input type="radio" name="outerBox" value="1">有
                    </label>
                    <label class="radio-inline" style="margin-left: 50px">
                        <input type="radio" name="outerBox" value="2">无
                    </label>
                </td>
            </tr>

            <tr>
                <td>
                    <b>外箱材质：</b>
                </td>
                <td colspan="2">
                    <div class="form-group">
                        <select name="outerBoxMaterial" onchange="yz_outerBoxMaterial()" id="outerBoxMaterial" class="form-control" style="width: 150px">
                            <option value="1">请选择</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                        <span id="span_outerBoxMaterial" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">备注</font>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <div class="form-group">
                        <textarea name="remarks" onkeyup="yz_remarks()" id="remarks" placeholder="请输入备注内容，240字以内" autocomplete="off" class="form-control" rows="10" cols="100%"></textarea>
                        <span id="span_remarks" style="color: red"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">附件</font>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="file" width="500100px" id="file‐Portrait" name="accessory"/>
                    <input type="hidden" id="file" name="accessory"/>
                </td>
            </tr>
        </table>
        <br>
        <br>
        <div style="margin-left: 50px">
            <b>*需求类型：</b>
            <label class="radio-inline" style="margin-left: 15px">
                <input type="radio" name="requirementType" value="1">产品询价
            </label>
            <label class="radio-inline" style="margin-left: 50px">
                <input type="radio" name="requirementType" value="2">询设计方案
            </label>
        </div>
        <br><br>
        <center>
            <button type="button" onclick="return addPicture()" class="btn btn-primary">填写询图单</button>
            <button type="button" class="btn btn-primary" onclick="addFindPriceChr()" style="margin-left: 50px">填写询价单</button>
        </center>
    </form>
    <br><br><br>
</body>

<script>

    $(function(){
        selById_cyt();

        var userRealName = parent.$("#userRealName").text();
        if(userRealName == ""){
            alert ("您还未进行实名认证，暂时无法操作")
            location.href = "addUserInfo.html";
            return ;
        }
    })


    function selById_cyt(){
        var productId = $("#upUpdatePicture_cyt").val()
        $.ajax({
            url: 'selById_cyt?productId='+productId,
            success: function (data) {
                $("input[name='productId']").val(data.productId);
                $("input[name='productName']").val(data.productName);
                $("input[name='productCount']").val(data.productCount);
                $("[value="+data.productCategory+"]").prop("checked",true);
                $("input[name='inletPressureMax']").val(data.inletPressureMax);
                $("input[name='inletPressureMin']").val(data.inletPressureMin);
                $("input[name='outletPressureMax']").val(data.outletPressureMax);
                $("input[name='outletPressureMin']").val(data.outletPressureMin);
                $("input[name='flowmeterLength']").val(data.flowmeterLength);
                $("input[name='pressureRegulatorType']").val(data.pressureRegulatorType);
                $("input[name='productBrand']").val(data.productBrand);
                $("[value="+data.outerBox+"]").prop("checked",true);
                $("#outerBoxMaterial").val(data.outerBoxMaterial);
                $("#remarks").val(data.remarks);
                $("input[name='accessory']").val(data.accessory);
                $("[value="+data.requirementType+"]").prop("checked",true);
                $("input[name='queryPictureId']").val(data.queryPictureId);
                $("input[name='queryPictureStartDate']").val(data.queryPictureStartDate);
                $("input[name='queryPictureCutDate']").val(data.queryPictureCutDate);
                $("input[name='queryPictureEndDate']").val(data.queryPictureEndDate);
                $("input[name='contacts']").val(data.contacts);
                $("input[name='contactsPhone']").val(data.contactsPhone);
                $("input[name='contactsEmail']").val(data.contactsEmail);
                $("input[name='contactsRemark']").val(data.contactsRemark);
                $("input[name='contactsAccessory']").val(data.contactsAccessory);
                $("input[name='queryPictureRequirementType']").val(data.queryPictureRequirementType);
                $("input[name='queryPictureState']").val(data.queryPictureState);
            }
        })
    }

    // /* 备注 */
    // function yz_remarks(){
    //     var remarks = $("#remarks").val()
    //     var span = $("#span_remarks")
    //     var reg = /^[\u4e00-\u9fa51-9a-zA-Z]{0,240}$/
    //     if (reg.test(remarks)){
    //         span.text("")
    //         return true;
    //     }else{
    //         span.text("超出240字")
    //         return false;
    //     }
    // }

    /* 验证外箱材质 */
    function yz_outerBoxMaterial(){
        var outerBoxMaterial = $("#outerBoxMaterial").val()
        var span = $("#span_outerBoxMaterial")
        if (outerBoxMaterial != '请选择'){
            span.text("")
            return true;
        }else{
            span.text("必选")
            return false;
        }
    }

    /* 流量计长度 */
    function yz_flowmeterLength(){
        var flowmeterLength = $("#flowmeterLength").val()
        var span = $("#span_flowmeterLength")
        var reg = /^[1-9]{1,5}(?:\.\d{1,3})?$/
        if (reg.test(flowmeterLength)){
            span.text("")
            return true
        }else{
            span.text("请输入1-99999.999的数字")
            return false
        }
    }

    /* 出口压力最大值 */
    function yz_outletPressureMax(){
        var outletPressureMax = $("#outletPressureMax").val()
        var span = $("#span_outletPressureMax")
        var reg = /^\d{1,5}(?:\.\d{1,3})?$/
        if (reg.test(outletPressureMax)){
            span.text("")
            return true
        }else{
            span.text("请输入0-99999.999的数字")
            return false
        }
    }

    /* 出口压力最小值 */
    function yz_outletPressureMin(){
        var outletPressureMin = $("#outletPressureMin").val()
        var span = $("#span_outletPressureMin")
        var reg = /^\d{1,5}(?:\.\d{1,3})?$/
        if (reg.test(outletPressureMin)){
            span.text("")
            return true
        }else{
            span.text("请输入0-99999.999的数字")
            return false
        }
    }


    /* 进口压力最大值 */
    function yz_inletPressureMax(){
        var inletPressureMax = $("#inletPressureMax").val()
        var span = $("#span_inletPressureMax")
        var reg = /^\d{1,5}(?:\.\d{1,3})?$/
        if (reg.test(inletPressureMax)){
            span.text("")
            return true
        }else{
            span.text("请输入0-99999.999的数字")
            return false
        }
    }

    /* 进口压力最小值 */
    function yz_inletPressureMin(){
        var inletPressureMin = $("#inletPressureMin").val()
        var span = $("#span_inletPressureMin")
        var reg = /^\d{1,5}(?:\.\d{1,3})?$/
        if (reg.test(inletPressureMin)){
            span.text("")
            return true
        }else{
            span.text("请输入0-99999.999的数字")
            return false
        }
    }

    <!--  验证采购数量  -->
    function yz_productCount(){
        var productCount = $("#productCount").val()
        var span = $("#span_productCount")
        var reg = /^[0-9]{1,}$/
        if (reg.test(productCount)){
            span.text("")
            return true
        }else{
            span.text("请输入正整数")
            return false
        }
    }

    /* 验证产品名称 */
    function yz_productName(){
        var productName = $("#productName").val()
        var reg = /^[\u4e00-\u9fa5a-zA-Z1-9]{3,40}$/
        if (reg.test(productName)){
            $("#div_inletPressureMin").hide()
            return true
        }else{
            $("#div_inletPressureMin").show()
            return false
        }
    }

    function addFindPriceChr(){
        var id = $("#upUpdatePicture_cyt").val()
        if (yz_productName() & yz_productCount() & yz_inletPressureMin() & yz_inletPressureMax() & yz_outletPressureMin() & yz_outletPressureMax() & yz_flowmeterLength() & yz_outerBoxMaterial()){
            $.ajax({
                url:"addPicture_cyt",
                data:$("#myform").serialize(),
                dateType:"post",
                success:function(data){
                    alert("操作成功")
                    location.href="addFindPriceChr?id="+id;
                }
            })
            return true;
        }
        return false;
    }

    /* 新增 总验证表单 */
    function addPicture(){
        var productId = $("#upUpdatePicture_cyt").val()
        if (yz_productName() & yz_productCount() & yz_inletPressureMin() & yz_inletPressureMax() & yz_outletPressureMin() & yz_outletPressureMax() & yz_flowmeterLength() & yz_outerBoxMaterial()){
            $.ajax({
                url:"addPicture_cyt",
                data:$("#myform").serialize(),
                dateType:"post",
                success:function(data){
                    alert("操作成功")
                    location.href="updatePictureById_cyt?productId="+productId
                }
            })
            return true;
        }
            return false;
    }

    /* 图片上传 */
    $('#file‐Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload_cyt",
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form‐data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn‐primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon‐king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"

    })
    //导入文件上传完成之后的事件
    $("#file‐Portrait").on("fileuploaded", function (event, data, previewId, index) {
        console.log(data);
        console.log(data.response.requestPath)
        $("#file").val(data.response.requestPath);
    });

</script>

</html>